<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>车型展示</title>
		<link rel="stylesheet" type="text/css" href="../css/basic.css">
		<link rel="stylesheet" type="text/css" href="../css/style.css">
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css">
		<link rel="stylesheet" type="text/css" href="../css/swiper.min.css">
		<style type="text/css">
			.swiper-container {
			  width: 100%;
			  height: 300px;
			  margin-left: auto;
			  margin-right: auto;
			}
			
			.swiper-slide {
			  background-size: cover;
			  background-position: center;
			}
			
			.gallery-top {
			  height: 80%;
			  width: 100%;
			}
			
			.gallery-thumbs {
			  height: 100px;
			  box-sizing: border-box;
			  padding: 10px 0;
			  margin-top: -100px;
			}
			
			.gallery-thumbs .swiper-slide {
			  height: 100%;
			  opacity: 1;
			  border: 5px solid transparent;
			}
			
			.gallery-thumbs .swiper-slide-thumb-active {
			  opacity: 1;
			  border: 5px solid #ff9927;
			}
		</style>
	</head>
	<body>
		<div class="index-content">
			<!-- 头部 -->
			<header>
				<div class="header-content width1300 clearfix">
					<div class="logo fl clearfix">
						<img src="../img/logo.png" class="fl" />
						<p class="fl">中成商务房车</p>
					</div>
					<div class="search fl">
						<input type="text" placeholder="请输入想要搜索的内容" class="fl" />
						<i class="iconfont icon-sousuo1 fr"></i>
					</div>
					<div class="telphone fr">
						<img src="../img/tel.png" />
						<div class="num">热线电话<b>400-079-6969</b></div>
					</div>
				</div>
				<div class="nav clearfix width1300">
					<div class="nav-list fl">首页</div>
					<div class="nav-list fl">选车中心</div>
					<div class="nav-list fl">推荐车系</div>
					<div class="nav-list fl">优惠资讯</div>
					<div class="nav-list fl">视频中心</div>
					<div class="nav-list fl">关于我们</div>
				</div>
			</header>
			<!-- 车辆详情 -->
			<div class="discount">
				<div class="width1300">
					<div class="carDetail-info clearfix">
						<!-- 轮播图 -->
						<div class="swiper-container gallery-top" style="height: 573px;">
						  <div class="swiper-wrapper">
						    <div class="swiper-slide" style="background-image:url(../img/index_banner.png)"></div>
						    <div class="swiper-slide" style="background-image:url(../img/index_banner.png)"></div>
						    <div class="swiper-slide" style="background-image:url(../img/index_banner.png)"></div>
						    <div class="swiper-slide" style="background-image:url(../img/index_banner.png)"></div>
						  </div>
						  <!-- Add Arrows -->
						  <div class="swiper-button-next swiper-button-white"></div>
						  <div class="swiper-button-prev swiper-button-white"></div>
						</div>
						<div class="swiper-container gallery-thumbs">
						  <div class="swiper-wrapper">
						    <div class="swiper-slide" style="background-image:url(../img/index_banner.png)"></div>
						    <div class="swiper-slide" style="background-image:url(../img/index_banner.png)"></div>
						    <div class="swiper-slide" style="background-image:url(../img/index_banner.png)"></div>
						    <div class="swiper-slide" style="background-image:url(../img/index_banner.png)"></div>
						  </div>
						</div>
					</div>
					<div class="discount-count">
						<h2>优惠咨询</h2>
						<div class="discount-all clearfix">
							<div class="discount-list">
								<div class="img-box">
									<img src="../img/car1.jpg" >
								</div>
								<h3 class="twoline">获得解放的打击腐败的说的不是的v反对v士大夫大师傅大苏打</h3>
								<p class="clearfix">
									<span class="iconfont icon-yj fl">1931</span>
									<span class="fr">2020-10-23</span>
								</p>
							</div>
							<div class="discount-list">
								<div class="img-box">
									<img src="../img/car1.jpg" >
								</div>
								<h3 class="twoline">获得解放的打击腐败的说的不是的v反对v士大夫大师傅大苏打</h3>
								<p class="clearfix">
									<span class="iconfont icon-yj fl">1931</span>
									<span class="fr">2020-10-23</span>
								</p>
							</div>
							<div class="discount-list">
								<div class="img-box">
									<img src="../img/car1.jpg" >
								</div>
								<h3 class="twoline">获得解放的打击腐败的说的不是的v反对v士大夫大师傅大苏打</h3>
								<p class="clearfix">
									<span class="iconfont icon-yj fl">1931</span>
									<span class="fr">2020-10-23</span>
								</p>
							</div>
							<div class="discount-list">
								<div class="img-box">
									<img src="../img/car1.jpg" >
								</div>
								<h3 class="twoline">获得解放的打击腐败的说的不是的v反对v士大夫大师傅大苏打</h3>
								<p class="clearfix">
									<span class="iconfont icon-yj fl">1931</span>
									<span class="fr">2020-10-23</span>
								</p>
							</div>
							<div class="discount-list">
								<div class="img-box">
									<img src="../img/car1.jpg" >
								</div>
								<h3 class="twoline">获得解放的打击腐败的说的不是的v反对v士大夫大师傅大苏打</h3>
								<p class="clearfix">
									<span class="iconfont icon-yj fl">1931</span>
									<span class="fr">2020-10-23</span>
								</p>
							</div>
						</div>
					</div>
				</div>



				<!-- 悬浮按钮 -->
				<div class="goTop">
					<img src="../img/top.png" />
				</div>


				<!-- 底部 -->
				<footer class="">
					<div class="foot-classify clearfix width1300">
						<div class="foot-nav">
							<h4>车型总鉴</h4>
							<p>奢石版</p>
							<p>v级系列</p>
							<p>斯宾特系列</p>
							<p>大众T6</p>
							<p>GMC</p>
							<p>豪华加长</p>
						</div>
						<div class="foot-nav">
							<h4>品牌天地</h4>
							<p>品牌中心</p>
							<p>关于我们</p>
							<p>赛事风采</p>
						</div>
						<div class="foot-nav">
							<h4>高级私人定制系列</h4>
							<p>限量发售</p>
							<p>车主故事</p>
						</div>
						<div class="foot-nav">
							<h4>售后服务</h4>
							<p>车主服务</p>
							<p>常见问与答</p>
							<p>原厂配件</p>
							<p>选装配件及精品</p>
						</div>
						<div class="foot-nav">
							<h4>新闻资讯</h4>
							<p>企业动态</p>
							<p>行业热点</p>
						</div>
					</div>
					<div class="companyInfo">
						<div class="width1300">
							<div class="company_name"></div>
							<div class="company-info clearfix">
								<div class="fl">杭州中诚汽车销售服务有限公司&nbsp;&nbsp;|&nbsp;&nbsp;<i>华东高端商务房车展销中心</i></div>
								<div class="fr">
									<div class="telphone fr clearfix">
										<img src="../img/tel.png" />
										<div class="num">热线电话<b>400-079-6969</b></div>
									</div>
									<p class="address">地址：浙江省杭州市下城区绍兴路2号</p>
									<p class="police clearfix"><img src="../img/police.png">浙公网安备33010302003582号</p>
								</div>
							</div>
						</div>
					</div>
				</footer>
			</div>
			<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
			<script type="text/javascript" src="../js/swiper.min.js"></script>
			<script type="text/javascript">
				
				    var galleryThumbs = new Swiper('.gallery-thumbs', {
				      spaceBetween: 10,
				      slidesPerView: 4,
				      loop: true,
				      freeMode: true,
				      loopedSlides: 5, //looped slides should be the same
				      watchSlidesVisibility: true,
				      watchSlidesProgress: true,
				    });
				    var galleryTop = new Swiper('.gallery-top', {
				      spaceBetween: 10,
				      loop: true,
				      loopedSlides: 5, //looped slides should be the same
				      navigation: {
				        nextEl: '.swiper-button-next',
				        prevEl: '.swiper-button-prev',
				      },
				      thumbs: {
				        swiper: galleryThumbs,
				      },
				    });
				  
			</script>
	</body>
</html>
